<template>
	<view class="page">
		<u-form class="back" ref="uForm" :rules="rules" :model="form">
			<u-form-item borderBottom prop="phoneNumber">
				<u-input prefixIcon="account" prefixIconStyle="font-size: 22px;color: #909399" border="bottom"
					v-model="form.phoneNumber" placeholder="请输入手机号" maxlength="12" type="number"></u-input>
			</u-form-item>
			<u-form-item borderBottom prop="phoneNumber">
				<u-input prefixIcon="account" prefixIconStyle="font-size: 22px;color: #909399" border="bottom"
					v-model="form.username" placeholder="请输入用户名" maxlength="12" type="text"></u-input>
			</u-form-item>
			<u-form-item borderBottom prop="password">
				<u-input :password="true" prefixIcon="lock" prefixIconStyle="font-size: 22px;color: #909399"
					v-model="form.password" border="bottom" placeholder="请输入密码" maxlength="12"
					type="password"></u-input>
			</u-form-item>
			<u-form-item borderBottom prop="confirmPassword">
				<u-input :password="true" prefixIcon="lock" prefixIconStyle="font-size: 22px;color: #909399"
					v-model="form.confirmPassword" border="bottom" placeholder="请输入确认密码" maxlength="12"
					type="password"></u-input>
			</u-form-item>
			<u-form-item borderBottom prop="captcha">
				<u-input prefixIcon="lock" prefixIconStyle="font-size: 22px;color: #909399" v-model="form.captcha"
					border="bottom" placeholder="请输入验证码" maxlength="12" type="text">
					<template slot="suffix">
						<image @click="refreshCaptcha" style="width: 4rem;height: 2rem;" :src="captchaSrc" mode="aspectFit"></image>
					</template></u-input></u-form-item>
			<u-button @click="submit" color="#ff5a08" style="margin-top: 1rem;" text="登录"></u-button>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				captchaSrc: '',
				form: {
					phoneNumber: '',
					username:'',
					password: '',
					confirmPassword: '',
					captcha: ''
				},
				rules: {
					phoneNumber: [{
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}],
					confirmPassword: [{
						required: true,
						message: '请输入确认密码',
						trigger: ['blur', 'change']
					}]
				}
			}
		},
		mounted() {
			this.getcapth()
		},
		methods: {
			async getcapth() {

				const res = await this.$request.get('/system/user/captcha', {})
				console.log(res);
				if (res.code == 200) {

					this.captchaSrc = 'data:image/jpeg;base64,' + res.data.captchaImage;
				}

			},
			refreshCaptcha(){
				this.getcapth()
			},
			async submit() {
				try {
					const isValid = await this.$refs.uForm.validate();
					if (isValid) {
						uni.$u.toast('校验通过');
						const param = {
							phoneNumber: this.form.phoneNumber,
							account:this.form.phoneNumber,
							username:this.form.username,
							password: this.form.password,
							confirmPassword: this.form.confirmPassword,
							captcha: this.form.captcha
						};
						const res = await this.$request.post("/system/user/register", param);
						if (res.code == 200) {
							uni.$u.toast(res.message);
							const {newUser: { uid }}=res.data
						    const token=res.token
							console.log(token,uid);
							// 在登录成功后
							this.$store.dispatch('login', {uid,token});
							uni.switchTab({
								url: '/pages/tabBar/my/index'
							})
						} else {
							uni.$u.toast(res.message);
						}
					} else {
						uni.$u.toast('校验失败');
					}
				} catch (error) {
					console.error(error);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100vh;
		
		background: #ffffff !important;
	}
    .back{
		padding: 1rem;
	}
	/deep/.u-border-bottom {
		border: 0.5px solid #f3b10a;
	}
</style>